<template>
  <view>
    <view class="home_tab">
      <view class="home_tab_title">
        <uni-segmented-control
          :current="current"
          :values="items.map((v) => v.title)"
          @clickItem="onClickItem"
          style-type="text"
          active-color="#83C7B7"
        ></uni-segmented-control>
      </view>
      <view v-if="current === 0">
        <view v-for="i in all" :key="i.id">
          <view class="card">
            <view class="uni-flex uni-row"
              ><view class="left-flex uni-row"
                ><view class="iconfont icon-shangdian"></view
                ><view class="business">{{ i.business }}</view></view
              ><view class="status">交易成功</view></view
            >
            <view class="uni-flex uni-row content"
              ><img :src="i.src" alt="" class="goods" /><view
                ><view class="uni-flex uni-row about-goods"
                  ><view class="business"> {{ i.name }}</view
                  ><view class="right business">¥{{ i.money }}</view></view
                ><view class="uni-flex uni-row about-goods"
                  ><view>{{ i.spe }}</view
                  ><view class="right">x{{ i.number }}</view></view
                ><view class="receive">当日发货</view></view
              >
            </view>
            <view class="uni-flex uni-row right-float"
              ><view>总价¥{{ i.total }}</view
              ><view class="pay">实付款¥{{ i.pay }}</view></view
            >
          </view>
        </view>
      </view>
      <view v-if="current === 1">
        <view class="text-padding-wrap">
          <view class="iconfont icon-meiyoudingdan1"> </view>
        </view>
        <view class="word-padding-wrap">
          <view class="no">您还没有相关的订单</view
          ><view class="want">可以去看看有哪些想买的</view>
        </view>
      </view>
      <view v-if="current === 2">
        <view class="text-padding-wrap">
          <view class="iconfont icon-meiyoudingdan1"> </view>
        </view>
        <view class="word-padding-wrap">
          <view class="no">您还没有相关的订单</view
          ><view class="want">可以去看看有哪些想买的</view>
        </view>
      </view>
      <view v-if="current === 3">
        <view class="text-padding-wrap">
          <view class="iconfont icon-meiyoudingdan1"> </view>
        </view>
        <view class="word-padding-wrap">
          <view class="no">您还没有相关的订单</view
          ><view class="want">可以去看看有哪些想买的</view>
        </view>
      </view>
      <view v-if="current === 4">
        <view class="text-padding-wrap">
          <view class="iconfont icon-meiyoudingdan1"> </view>
        </view>
        <view class="word-padding-wrap">
          <view class="no">您还没有相关的订单</view
          ><view class="want">可以去看看有哪些想买的</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
  components: {
    uniSegmentedControl,
  },
  data() {
    return {
      items: [
        { title: "全部" },
        { title: "待付款" },
        { title: "待发货" },
        { title: "待收货" },
        { title: "待评价" },
      ],
      current: 0,
      all: [
        {
          id: 1,
          business: "嘎嘎哩旗舰店",
          src: "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
          name: "快乐星球门票",
          money: "1.00",
          spe: "永久门票",
          number: 1,
          total: "1.00",
          pay: "1.00",
        },
        {
          id: 2,
          business: "嘎嘎哩旗舰店",
          src: "https://z3.ax1x.com/2021/06/06/2UTk7V.png",
          name: "剧本杀大会员",
          money: "1.00",
          spe: "终身会员",
          number: 1,
          total: "1.00",
          pay: "1.00",
        },
      ],
    };
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
  },
};
</script>

<style>
page {
  background-color: #efefef;
}

.text-padding-wrap {
  padding-top: 80px;
}
.icon-meiyoudingdan1 {
  text-align: center;
}
.word-padding-wrap {
  padding-top: 10px;
  text-align: center;
}
.home_tab_title {
  padding: 0 15px;
  margin: 0 auto;
  font-size: 12px;
}
.no {
  color: #5a5a5a;
  font-size: 14px;
}
.want {
  color: #929292;
  font-size: 12px;
}
.card {
  background-color: #ffffff;
  height: 160px;
  border-radius: 5%;
  margin: 5px;
  padding: 12px;
}
.uni-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* margin-bottom: 10px; */
}
.left-flex {
  display: flex;
  flex-direction: row;
  justify-content: left;
}
.right-float {
  float: right;
}
.uni-row {
  flex-direction: row;
}
.goods {
  width: 80px;
  height: 80px;
  border-radius: 5%;
}
.content {
  margin: 8px 0;
}
.right {
  margin-left: 133px;
}
.business {
  color: #181818;
}
.status {
  color: #ee6a45;
}
.about-goods {
  margin-bottom: 4px;
}
.receive {
  color: #e4a35b;
}
.pay {
  color: #181818;
  margin-left: 4px;
}
</style>